<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.intersection_id" placeholder="路口名称" style="width: 180px;">
							<el-option  v-for="item in selectData.intersectionData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.location_id" placeholder="路段名称" style="width: 180px;">
							<el-option  v-for="item in selectData.locationData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select clearable filterable v-model="dataForm.monitor_id" placeholder="监控杆名称" style="width: 180px;">
							<el-option  v-for="item in selectData.monitorPoleData" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="toQuery">查询</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%;height:79vh">
				<el-table-column align="center" prop="rsu_id" label="RSU序列号" />
				<el-table-column align="center" prop="region.name" label="区域名称" />
				<el-table-column align="center" prop="road.name" label="道路名"  />
				<el-table-column align="center" prop="location.name" label="路段名称" />
				<el-table-column align="center" prop="intersection.name" label="路口名称" />	
				<el-table-column align="center" prop="monitor_pole.name" label="监控杆名称" />
				<el-table-column align="center" prop="mec_rcu_id" label="MEC序列号" />
				<!-- <el-table-column align="center" prop="serial_number" label="RSU序列号" /> -->
				<el-table-column sortable align="center"  label="数据最近更新时间" >
					<template #default="scope">
						<div>	
							{{ scope.row.rsi_update_time?scope.row.rsi_update_time:"-" }}
						</div>
					</template>
				</el-table-column>
				<el-table-column align="center"  label="操作" >
					<template #default="scope">
						<div>
							<el-link type="primary" @click="toOpenDrawer(scope.row)">报文详情</el-link>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</el-card>
		<sel-drawer ref="drawerRef" :rsu_id="rsu_id"></sel-drawer>
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { rodesideApi } from '/@/api/rodeside/index';
import {deptApi} from "/@/api/system/dept/index"
import {userApi} from "/@/api/system/user/index"
import {dicApi} from "/@/api/system/dic/index"
const selDrawer = defineAsyncComponent(() => import('/@/views/make/rsi/drawer.vue'));
const rodeApi = rodesideApi();
const depApi = deptApi();
const useApi = userApi();
const diApi = dicApi()
const total = ref(0)
// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		loading: true,
	},
});
const drawerRef = ref()

// dx定义
const dataForm = ref({
	intersection_id:"",
	location_id:"",
	monitor_pole_id:"",
	page:1,
	limit:10,
	include:"region;road;intersection;location;monitorPole;manufacturer;model",
})

const toOpenDrawer = (row:any)=>{
	rsu_id.value = row.rsu_id
	
	// drawerRef.value.openDrawer()
	// drawerRef.value.queryData()
	setTimeout(() => {
		drawerRef.value.queryData()
		drawerRef.value.openDrawer()
	}, 200);

}
const handleCurrentChange = (val:number)=>{
		dataForm.value.page = val
		getTableList()
}
const selectData = reactive({
		intersectionData:[],
		locationData:[],
		monitorPoleData:[],
	})
	const searchForm = ref({search:""})
	const getSelectData = (async ()=>{
		searchForm.value.search = `status:1`
		let intersectionRes = await useApi.userTableApi(searchForm.value);
		if(intersectionRes.isSuccess){
			selectData.intersectionData = intersectionRes.returnData
		}
		let locationRes = await depApi.getDepList(searchForm.value);
		if(locationRes.isSuccess){
			selectData.locationData = locationRes.returnData
		}
		let monitorRes = await diApi.getDicList(searchForm.value);
		if(monitorRes.isSuccess){
			selectData.monitorPoleData = monitorRes.returnData
		}
	})
	const rsu_id = ref()
	const toQuery = (async ()=>{
		dataForm.value.search =`intersection_id:${dataForm.value.intersection_id};location_id:${dataForm.value.location_id};monitor_pole_id:${dataForm.value.monitor_pole_id}` 
		getTableList()
	})
	const getTableList=(async ()=>{
		state.tableData.loading =true
		let res = await rodeApi.getTableListApi(dataForm.value);
		if(res.isSuccess){
			state.tableData.data = res.returnData.data
			state.tableData.loading =false
			total.value= res.returnData.total
		}
		//console.log(res,66)
	})

// dx书写end

// 页面加载时
onMounted(() => {
	getSelectData()
	getTableList()
});
</script>

<style scoped>
	.el-input{
		height: 40px;
	}
	.el-button{
		height: 40px;
	}
</style>
